<template>
   <div class="order">
      <!-- 酒店订单 -->
      <div class="title_5" v-if="route.query.type == 5">
         <div>
            <h2 class="font">{{ $route.query.title }}</h2>
         </div>
      </div>
      <!-- 飞机票订单 -->
      <div class="title_1" v-if="route.query.type == 1">
         <div>
            <h2 class="font">{{ $route.query.title }}</h2>
         </div>
      </div>
      <!-- 火车票订单 -->
      <div class="title_2" v-if="route.query.type == 2">
         <div>
            <h2 class="font">{{ $route.query.title }}</h2>
         </div>
      </div>
      <!-- 旅游订单 -->
      <div class="title_6" v-if="route.query.type == 6">
         <div>
            <h2 class="font">{{ $route.query.title }}</h2>
         </div>
      </div>
      <!-- 全部车票信息订单 -->
      <div class="title" v-if="route.query.type == 7">
         <div>
            <h2 class="font">{{ $route.query.title }}</h2>
         </div>
      </div>
      <div>
         <el-table ref="tableRef" row-key="date" :data="order_data01" style="width: 100%"
            :row-style="{ height: '80px' }">
            <el-table-column prop="startDate" label="出行日期" sortable width="150" column-key="date" v-if="route.query.type != 5"/>
            <el-table-column prop="orderId" label="订单编号" width="150" />
            <el-table-column prop="startTime" label="出发时间" width="120" v-if="route.query.type != 5" />
            <el-table-column prop="startTime" label="入住日期" width="140" v-else />
            <el-table-column prop="reachTime" label="到达时间" width="120" v-if="route.query.type != 5" />
            <el-table-column prop="reachTime" label="退房日期" width="140" v-else />
            <el-table-column prop="startPlace" label="始发站" width="100" v-if="route.query.type != 5" />
            <el-table-column prop="startPlace" label="酒店名称" width="130" v-else />
            <el-table-column prop="endPlace" label="终点站" width="100" v-if="route.query.type != 5" />
            <el-table-column prop="rider" label="乘客" width="100" v-if="route.query.type != 5" />
            <el-table-column prop="rider" label="入住人" width="140" v-else />
            <el-table-column prop="payPrice" label="总价格/元" width="100" />
            <el-table-column prop="payTime" label="支付时间" width="120" />

            <el-table-column prop="payState" label="订单状态" width="120" :filters="[
               { text: '已支付', value: '已支付' },
               { text: '待支付', value: '待支付' },
            ]" :filter-method="filterTag" filter-placement="bottom-end">
               <template #default="scope">
                  <el-tag :type="scope.row.payState === '已支付' ? 'primary' : 'warning'" disable-transitions>
                     {{ scope.row.payState }}
                  </el-tag>
               </template>
            </el-table-column>

            <el-table-column label="操作" width="100">
               <template #default="scope">
                  <el-button type="success" v-if="scope.row.payState === '待支付'" @click="get_ordertext(scope.row)">
                     支付
                  </el-button>
               </template>
            </el-table-column>

         </el-table>
      </div>
   </div>

   <!-- 删除订单提示框 -->
   <tips />
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { TableInstance } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
import tips from "../components/Tips.vue"
import Link from "../api/Link.js";
import apiurl from "../api/url.js";

//pinia本地化存储用户信息
import { useOrderData } from "../store/OrderData";
const OrderData = useOrderData();
import { useUserStore } from "../store/UserStore";
const UserStore = useUserStore();

onMounted(() => {
   console.log(route.query.type);
   Link(apiurl.list, "POST", { userId: UserStore.id, type: route.query.type })
      .then((ok) => {


         console.log(ok)
         order_data01.value = ok
      })
})

interface Order {
   startDate: string
   orderId: string
   startTime: string
   reachTime: string
   startPlace: string
   endPlace: string
   rider: string
   payPrice: string
   payTime: string
   payState: string
}

//订单数据
const order_data01 = ref([])

//通过支付状态筛选订单
const tableRef = ref<TableInstance>()
const filterTag = (value: string, row: Order) => {
   return row.payState === value
}
//操作按钮
const centerDialogVisible = ref(false)
const get_ordertext = (row: Order) => {
   console.log(row.orderId);
   //判断操作类型
   if (!row.payBtn) {
      router.push({
         path: '/pay',
         query: {
            id: row.orderId,
            time: 500
         }
      })
   }
}
</script>

<style lang='scss' scoped>
//全部车票
.title {
   height: 100px;
   width: auto;
   margin: 10px;
   padding-bottom: 30px;
   padding-left: 20px;
   background-image: url("../assets/image/ticket.jpg");
   background-size: cover;
   background-position: center 60%;
   background-repeat: no-repeat;
   z-index: -1;
   .font{
      color: black;
      font-size: 20px;
      font-weight: 200;
   }
}

//酒店
.title_5 {
   height: 100px;
   width: auto;
   margin: 10px;
   padding-bottom: 30px;
   padding-left: 20px;
   background-image: url("../assets/image/hotel.jpg");
   background-size: cover;
   background-position: center 30%;
   background-repeat: no-repeat;
   z-index: -1;
   .font{
      color: black;
      font-size: 20px;
      font-weight: 200;
   }
}

//飞机票
.title_1 {
   height: 100px;
   width: auto;
   margin: 10px;
   padding-bottom: 30px;
   padding-left: 20px;
   background-image: url("../assets/image/air1.jpg");
   background-size: cover;
   background-position: center 20%;
   background-repeat: no-repeat;
   z-index: -1;
   .font{
      color: black;
   }
}

//火车票
.title_2 {
   height: 100px;
   width: auto;
   margin: 10px;
   padding-bottom: 30px;
   padding-left: 20px;
   background-image: url("../assets/image/火车票订单.jpg");
   background-size: cover;
   background-position: center 50%;
   background-repeat: no-repeat;
   z-index: -1;
   .font{
      color: black;
      font-size: 20px;
      font-weight: 200;
   }
}

//旅游
.title_6 {
   height: 100px;
   width: auto;
   margin: 10px;
   padding-bottom: 30px;
   padding-left: 20px;
   background-image: url("../assets/image/travel.jpg");
   background-size: cover;
   background-position: center 5%;
   background-repeat: no-repeat;
   z-index: -1;
   .font{
      color: black;
      font-size: 20px;
      font-weight: 200;
   }
}

.order {
   margin-left: 100px;
   margin-right: 100px;
   padding-top: 20px;
}
</style>